<template>
	<view class="apply-v">
		<view class="top_sticky">
			自助采集
		</view>
		<u-image :height="height" :src="src" @click="showPopup = true"></u-image>
		<u-popup v-model="showPopup" mode="bottom" border-radius="10" :safe-area-inset-bottom="true" :mask="false"
			:closeable="false">
			<view class="popup-content">
				<view class="popup-header">
					<view class="drag-handle"></view>
				</view>
				<view class="popup-body">
					<view class="form-item">
						<text>上报名称</text>
						<u-input type="text" v-model="reportName" placeholder="请输入上报名称"
							placeholder-style="color: #1F2329" />
					</view>
					<view class="divider"></view>
					<view class="form-item">
						<text>上报备注</text>
						<u-input type="text" v-model="reportRemark" placeholder="请输入上报备注"
							placeholder-style="color: #1F2329" />
					</view>
					<view class="divider"></view>
					<view class="location-info">
						<view style="width: 100%;font-size: 32rpx;    background-color: #fdf6ec;
					color: #ff9900; padding: 15rpx 25rpx; align-items: center; border-radius: 3px; display: inline-block;
					border: 1px solid #fcbd71; line-height: 1"><u-icon name="map-fill"></u-icon>位置：{{ location }}</view>
					</view>
					<button type="primary" class="button-btn" style="width: 100%;" @click="submitReport">上报该位置</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				height: '1350rpx',
				src: "", //require('@/static/image/tabbar/dt.png'),
				showPopup: true,
				reportName: '福州开瑞动力',
				reportRemark: '华雄大厦',
				location: '福建省福州市鼓楼区凉州路',
				mapIcon: "", //require('@/static/image/tabbar/dt.png'),
			};
		},
		computed: {

		},
		watch: {

		},
		onShow() {
			this.showPopup = true
		},
		onLoad() {

		},
		onUnload() {

		},
		methods: {
			openPopup() {
				this.showPopup = true;
			},
			submitReport() {
				// 处理上报逻辑
				console.log('上报名称:', this.reportName);
				console.log('上报备注:', this.reportRemark);
				console.log('位置:', this.location);

				// 关闭弹出框
				this.showPopup = false;
			}
		}
	};
</script>

<style lang="scss">
	.top_sticky {
		z-index: 999;
		position: sticky;
		top: var(--window-top);
		background: linear-gradient(to right, #014FEB, #2775FE);
		height: 130rpx;
		line-height: 170rpx;
		color: #fff;
		text-align: center;
		font-weight: 400;
		font-size: 36rpx;
	}

	.popup-content {
		background-color: #fff;
		padding-top: 15rpx;
		padding-left: 35rpx;
		padding-right: 35rpx;
		padding-bottom: 45rpx;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	.popup-header {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.drag-handle {
		width: 70px;
		height: 5px;
		background-color: #ccc;
		border-radius: 5px;
	}

	.popup-body {
		display: flex;
		flex-direction: column;
	}

	.form-item {
		display: flex;
		align-items: center;
		// margin-bottom: 10px;
	}

	.form-item text {
		width: 80px;
		color: #8F959E;
		font-size: 32rpx;
	}

	.location-info {
		// background-color: #ffebcc;
		// padding: 10px;
		border-radius: 5px;
		margin-bottom: 20rpx;
	}

	.button-btn {
		height: 78rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	.divider {
		border-bottom: 1px solid #EBF5FF;
		margin-bottom: 20rpx;
	}

	/deep/ .u-input__input {
		font-size: 32rpx !important;
	}

	/deep/ .uni-input-wrapper {
		color: #1F2329 !important;
	}
</style>